<template>
  <div id="container">
    <div class="ivu-card p-3">
      <div class="search_title d-flex align-items-center">权限组设备</div>
      <div class="serach_case"></div>
    </div>

    <Row :gutter="10" class="m-3 h-100">
      <Col :span="6">
        <div class="ivu-card flex-grow-1 p-4 h-100">
          <Menu theme="light" @on-select="selectMenu" :active-name="groupId">
            <MenuGroup title="权限组">
              <MenuItem
                v-for="(item, index) in datalist"
                :key="index"
                :name="item.id"
              >
                <Icon type="md-construct" />
                {{ item.title }}
              </MenuItem>
            </MenuGroup>
          </Menu>
        </div>
      </Col>
      <Col :span="18">
        <div class="ivu-card flex-grow-1 p-4 h-100">
          <div
            class="tools d-flex align-items-center"
            style="
              width: 70%;
              display: flex;
              padding: 0px 2.5rem;
              margin-bottom: 2.5rem;
            "
          >
            <Input
              icon="ios-search"
              placeholder="请输入设备名称查询"
              v-model="searchItem.searchKey"
              @on-search="getDevice((page = 1))"
              search
              enter-button="搜索"
            />
            <Button class="addBtn ml-2" type="primary" @click="addAction"
              >+&nbsp;&nbsp;添加设备</Button
            >
           
            <Button class="addBtn" type="error" @click="removeAction"
              >-&nbsp;&nbsp;移除设备</Button
            >
          </div>

          <div style="padding: 0px 2.5rem">
            <Table :columns="columns" :data="list" :loading="loading"  @on-selection-change="selectDevices">
              <template slot-scope="{ row, index }" slot="action">
                <span class="btn" @click="edit(index)">编辑</span>
                <span class="btn" @click="deleteInfo(index)">删除</span>
              </template>
            </Table>
            <div class="text-right mt-4">
              <Page
                :total="total"
                :page-size-opts="[10, 20, 40, 50, 100]"
                show-sizer
                :current="page"
                :page-size="pageSize"
                @on-page-size-change="pageSizeChange"
                @on-change="pageChange"
              ></Page>
            </div>
          </div>
        </div>
      </Col>
    </Row>

    <Drawer
      title="设备信息"
      v-model="showDevice"
      width="520"
      :mask-closable="false"
      :styles="styles"
    >
      <Form label-position="top">
        <Table :columns="columns" :data="noList" @on-selection-change="selectDevices">
          <template slot-scope="{ row }" slot="status">
            <Badge v-show="row.status == 1" color="green" text="正常" />
            <Badge v-show="row.status != 1" color="red" text="禁用" />
          </template>
          <template slot-scope="{ row, index }" slot="action">
            <span class="btn" @click="addDevice(index)">添加</span>
          </template>
        </Table>
      </Form>
      <div class="demo-drawer-footer">
        <Button style="margin-right: 8px" @click="showDevice = false"
          >取消</Button
        >
        <Button type="primary" @click="saveInfo">批量添加</Button>
      </div>
    </Drawer>
  </div>
</template>

<script>
import index from "./index.js";
export default index;
</script>

<style lang="less" scoped>
@import "./index.less";
</style>
<style lang="less" scoped>
#container {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  background-color: transparent !important;

  .search_title {
    font-size: 16px;
    font-weight: 600;
    color: #515a6e;
    text-align: left;
    background-color: #fff;
    margin-bottom: 1rem;
    // .largeIcon {
    //   color: #9a70f3;
    //   background-color: #d4c2f9;
    // }
  }

  .serach_case {
    .ivu-form-item {
      margin-bottom: 10px;
    }
  }

  .tools {
    margin-bottom: 25px;

    .ivu-btn {
      margin: 0 10px 0 0;
    }
  }
}
</style>
